<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">

	<title>Neon | Dashboard 4</title>


	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>

	<script src="assets/js/ie8-responsive-file-warning.js"></script>

	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


	<!-- 引入 ECharts 文件 -->
	<script src="echarts.min.js"></script>
	<!--引入echarts-->
	<script src='/js/echarts.min.js'></script>
	<script src='/js/echarts-liquidfill.js'></script>



	<!--引用百度地图API-->
	<style type="text/css">
		html,body{margin:0;padding:0;}
		.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
		.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>

	<!--注意把Css样式放到最下面-->
	<style type="text/css">

		body{
			margin: 0px auto;
			width:100%;
			min-width:1024px;
			max-width:100%;
			height:100%;
			background-color:white;
		}

		.centerItem {
			width: 856px;
			height: 640px;
			background-color: #003077;
			margin: 110px auto 0 auto;
		}


		.info{
			font-size: 16px;
			line-height: 20px;
			font-weight: bold;
		}
		.col-md-4{
			padding: 5px;
		}

		.col-md-8{
			padding: 5px;
		}
		.col-md-8 .col-md-6{
			padding: 5px;
		}
		.col-md-12{
			padding: 5px;
		}

		/*表格居中+字体*/
		.table-tr{
			font-size: 20px;
			background-color:#ffeeba;
			align-items: center;
		}
		.table th, .table td {
			text-align: center;
			vertical-align: middle!important;
		}
		.table td{
			font-size: 15px;
		}
		/*根据id设置css样式*/
		#han
		{
			margin-bottom: 5px;
		}

	</style>

</head>

<body class="page-body  page-fade gray" data-url="http://neon.dev">

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

	<!--调用可复用代码：侧边栏-->
	<div th:insert="~{commons/common::sidebar(active='waterlineDetection.html')}"></div>

	<div class="main-content">
		<!--调用可复用代码：头部栏-->
		<div th:insert="~{commons/common::topbar}"></div>

		<!--主题展示-->
		<div class="row">
			<!--左半边框-->
			<div class="col-md-4" style="height:900px">

				<div class="tile-stats tile-white stat-tile" style="height: 35%">
					<div class="alert alert-info" role="alert">
						<a class="info"> 当月水质等级</a>
					</div>
					<div class="radis-left" id="annular-container" style="height: 90%"></div>
				</div>
				<div class="tile-stats tile-white stat-tile" style="height: 30%">
					<div class="alert alert-info" role="alert">
						<a class="info">全年水质等级</a>
					</div>
					<div id="radis-container" style="height: 80%"></div>
				</div>
				<div class="tile-stats tile-white stat-tile" style="height: 35%">
					<div class="alert alert-info" role="alert">
						<a class="info">全年超标水质占比</a>
					</div>
					<div id="radis2-container" style="height: 78% ;width:100%"></div>
				</div>


			</div>

			<!--中间框，地图显示-->
			<div class="col-md-8" style="height: 900px">
				<!--百度地图容器-->
				<div style="width:100%;height:590px;border:#ccc solid 3px; border: 1px solid deepskyblue" id="dituContent"></div>
				<div class="col-md-6" >
					<div class=" tile-stats tile-white stat-tile" style="height: 320px">
						<div class="alert alert-info" role="alert">
							<a class="info">全年超标数量</a>
						</div>
						<div id="rectangle-container" style="height: 100%"></div>
					</div>
				</div>
				<div class="col-md-6">
					<div class=" tile-stats tile-white stat-tile"  style="height: 320px">
						<div class="alert alert-info" role="alert">
							<a class="info">上星期企业排污量</a>
						</div>
						<div id="broken-container" style="height: 80%;width: 99%"></div>
					</div>
				</div>

			</div>

		</div>

		<br>


<!--		污水建议-->
		<div class="row">
			<div class="col-md-12">
						<div class="alert alert-info" role="alert" id="han">
							<p class="monitor">企业排污数据</p>
						</div>
						<table class="table table-bordered ">
						<tr class="table-tr">
							<th>排污站点</th>
							<th>污水(升/秒)</th>
							<th>水温(摄氏度)</th>
							<th>化学需氧量(毫克/升)</th>
							<th>总氮(毫克/升)</th>
							<th>氨氮(毫克/升)</th>
							<th>总磷(毫克/升)</th>
<!--							<th>总铜(毫克/升)</th>-->
<!--							<th>总镍(毫克/升)</th>-->
							<th>监测时间</th>
						</tr>
						<tr>
<!--						<td>-->
<!--							<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>-->
<!--						</td>-->
							<td>企业一</td>
							<td>7.69</td>
							<td>25</td>
							<td>12.64</td>
							<td>4.11</td>
							<td>0.88</td>
							<td>0.03</td>
<!--							<td>0.045</td>-->
<!--							<td>0.018</td>-->
							<td>2022-03-24 18:10:00</td>
						</tr>
						<tr>
<!--							<td>-->
<!--								<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>-->
<!--							</td>-->
							<td>企业二</td>
							<td>7.63</td>
							<td>23.5</td>
							<td>11.75</td>
							<td>3.98</td>
							<td>0.75</td>
							<td>0.02</td>
<!--							<td>0.053</td>-->
<!--							<td>0.015</td>-->
							<td>2022-03-27 18:10:00</td>
						</tr>
					 </table>

			</div>
		</div>
		<!-- Footer -->
		<footer class="main">
			晓辰学技术
		</footer>

	</div>
	<!--		聊天框-->
	<div th:insert="~{commons/common::rightbar}"></div>

</div>



<link rel="stylesheet" th:href="@{/css/jquery-jvectormap-1.2.2.css}">
<link rel="stylesheet" th:href="@{/css/rickshaw.min.css}">

<!-- Bottom Scripts -->
<script th:src="@{/js/main-gsap.js}"></script>
<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/joinable.js}"></script>
<script th:src="@{/js/resizeable.js}"></script>
<script th:src="@{/js/neon-api.js}"></script>
<script th:src="@{/js/jquery-jvectormap-1.2.2.min.js}"></script>
<script th:src="@{/js/jquery-jvectormap-europe-merc-en.js}"></script>
<script th:src="@{/js/jquery.sparkline.min.js}"></script>
<script th:src="@{/js/d3.v3.js}"></script>
<script th:src="@{/js/rickshaw.min.js}"></script>
<script th:src="@{/js/raphael-min.js}"></script>
<script th:src="@{/js/morris.min.js}"></script>
<script th:src="@{/js/toastr.js}"></script>
<script th:src="@{/js/fullcalendar.min.js}"></script>
<script th:src="@{/js/neon-chat.js}"></script>
<script th:src="@{/js/neon-custom.js}"></script>
<script th:src="@{/js/neon-demo.js}"></script>


<!--左半边框-->
	<!--环形图-->
<script type="text/javascript">
	var dom = document.getElementById("annular-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	option = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '7%',
			left: 'center'
		},
		title: {
			 text: '企业数量'
		},
		series: [
			{
				name: '标准数量',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '40',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: 260, name: 'I类' },
					{ value: 160, name: 'II类' },
					{ value: 140, name: 'III类' },
					{ value: 100, name: 'IV类' },
					{ value: 80, name: 'V类' }


				]
			}
		]
	};
	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>
	<!--圆形图-->
<script type="text/javascript">
	var dom = document.getElementById("radis-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	option = {
		title: {
			text: '不同标准',
			subtext: '数量情况',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [
			{
				name: '数量',
				type: 'pie',
				radius: '50%',
				data: [
					{ value: 1048, name: 'I类' },
					{ value: 735, name: 'II类' },
					{ value: 580, name: 'III类' },
					{ value: 484, name: 'IV类' },
					{ value: 300, name: 'V类' }
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>
	<!--不规则环形-->
<script type="text/javascript">
	var dom = document.getElementById("radis2-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	option = {
		title: {
			text: '占比',
			subtext: '超标水质',
			left: 'left'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			left: 'center',
			top: 'bottom',
			data: [
				 'I类' ,
				 'II类' ,
				 'III类' ,
				 'IV类' ,
				 'V类'
			]
		},
		toolbox: {
			show: true,
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				restore: { show: true },
				saveAsImage: { show: true }
			}
		},
		series: [
			{
				name: '全年超标占比率',
				type: 'pie',
				radius: [20, 100],
				center: ['50%', '50%'],
				roseType: 'area',
				itemStyle: {
					borderRadius: 5
				},
				data: [
					{ value: 330, name: 'I类' },
					{ value: 300, name: 'II类' },
					{ value: 280, name: 'III类' },
					{ value: 250, name: 'IV类' },
					{ value: 200, name: 'V类' }
				]
			}
		]
	};

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>


<!--地图的script设置-->
<script type="text/javascript">
	//创建和初始化地图函数：
	function initMap(){
		createMap();//创建地图
		setMapEvent();//设置地图事件
		addMapControl();//向地图添加控件
	}

	//创建地图函数：
	function createMap(){
		var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
		var point = new BMap.Point(112.578397,26.899517);//定义一个中心点坐标
		map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
		window.map = map;//将map变量存储在全局
	}

	//地图事件设置函数：
	function setMapEvent(){
		map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		map.enableKeyboard();//启用键盘上下左右键移动地图
	}

	//地图控件添加函数：
	function addMapControl(){
		//向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
		//向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
		//向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
	}
	initMap();//创建和初始化地图
</script>


<!--右下图-->
	<!--矩形图  -->
<script type="text/javascript">
	var dom = document.getElementById("rectangle-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	// prettier-ignore
	let dataAxis = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
	// prettier-ignore
	let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];
	let yMax = 500;
	let dataShadow = [];
	for (let i = 0; i < data.length; i++) {
		dataShadow.push(yMax);
	}
	option = {
		title: {
			subtext: '可以进行缩放'
		},
		xAxis: {
			data: dataAxis,
			axisLabel: {
				inside: true,
				color: '#fff'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			z: 10
		},
		yAxis: {
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				color: '#999'
			}
		},
		dataZoom: [
			{
				type: 'inside'
			}
		],
		series: [
			{
				type: 'bar',
				showBackground: true,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#83bff6' },
						{ offset: 0.5, color: '#188df0' },
						{ offset: 1, color: '#188df0' }
					])
				},
				emphasis: {
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#2378f7' },
							{ offset: 0.7, color: '#2378f7' },
							{ offset: 1, color: '#83bff6' }
						])
					}
				},
				data: data
			}
		]
	};
	// Enable data zoom when user click bar.
	const zoomSize = 6;
	myChart.on('click', function (params) {
		console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
		myChart.dispatchAction({
			type: 'dataZoom',
			startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
			endValue:
					dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
		});
	});

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>
	<!--折线图-->
<script type="text/javascript">
	var dom = document.getElementById("broken-container");
	var myChart = echarts.init(dom);
	var app = {};
	var option;
	option = {
		title: {
			// text: 'Stacked Area Chart'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['企业一', '企业二', '企业三', '企业四']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: '企业一',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series'
				},
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: '企业二',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series'
				},
				data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
				name: '企业三',
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series'
				},
				data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
				name: '企业四',
				type: 'line',
				stack: 'Total',
				label: {
					show: true,
					position: 'top'
				},
				areaStyle: {},
				emphasis: {
					focus: 'series'
				},
				data: [820, 932, 901, 934, 1290, 1330, 1320]
			}
		]
	};
	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>


<!--最下表格框-->


</body>
</html>